// SVG图标组件集合
export const EditIcon = {
  name: 'EditIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M18.5 2.50023C18.8978 2.10297 19.4374 1.87891 20 1.87891C20.5626 1.87891 21.1022 2.10297 21.5 2.50023C21.8971 2.89792 22.1212 3.43767 22.1212 4.00023C22.1212 4.56279 21.8971 5.10254 21.5 5.50023L12 15.0002L8 16.0002L9 12.0002L18.5 2.50023Z" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const DeleteIcon = {
  name: 'DeleteIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6H5H21" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const ImportIcon = {
  name: 'ImportIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M7 10L12 15L17 10" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 15V3" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const UpdateVectorsIcon = {
  name: 'UpdateVectorsIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 循环箭头路径 - 顺时针 -->
      <path d="M20 24C17.7909 24 16 25.7909 16 28V36C16 38.2091 17.7909 40 20 40H28M44 40C46.2091 40 48 38.2091 48 36V28C48 25.7909 46.2091 24 44 24H36" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>

      <!-- 箭头头部 - 右下 -->
      <path d="M28 40L32 44L36 40" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- 箭头头部 - 左上 -->
      <path d="M36 24L32 20L28 24" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>

      <!-- 中心点或小方块，表示核心/数据 -->
      <rect x="28" y="28" width="8" height="8" rx="2" :fill="color"/>
    </svg>
  `,
}

export const ArchiveIcon = {
  name: 'ArchiveIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21 8V21H3V8" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1 3H23V8H1V3Z" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M10 12H14" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const EnterMatchingIcon = {
  name: 'EnterMatchingIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 12H19" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 5L19 12L12 19" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const StopIcon = {
  name: 'StopIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="4" y="4" width="16" height="16" rx="2" :fill="color"/>
    </svg>
  `,
}

export const PlusIcon = {
  name: 'PlusIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 5V19" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M5 12H19" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const ExportIcon = {
  name: 'ExportIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 底部容器/托盘，与 ImportIcon 一致 -->
      <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- 向上箭头：提高箭头尺寸，顶点更靠上，整体与导入图标尺度匹配 -->
      <path d="M7 10L12 5L17 10" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 3V15" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const DisabledIcon = {
  name: 'DisabledIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
      <path d="M18.364 18.364L5.636 5.636" :stroke="color" stroke-width="2" stroke-linecap="round"/>
    </svg>
  `,
}

export const ExclamationTriangleIcon = {
  name: 'ExclamationTriangleIcon',
  props: {
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.29 3.86L1.82 18A2 2 0 0 0 3.5 21H20.5A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 9V13" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="12" cy="17" r="1" :fill="color"/>
    </svg>
  `,
}

export const ExclamationCircleIcon = {
  name: 'ExclamationCircleIcon',
  props: {
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
      <path d="M12 8V12" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="12" cy="16" r="1" :fill="color"/>
    </svg>
  `,
}

export const BanIcon = {
  name: 'BanIcon',
  props: {
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
      <path d="M4.93 4.93L19.07 19.07" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const CheckIcon = {
  name: 'CheckIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 6L9 17L4 12" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const XIcon = {
  name: 'XIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 6L6 18" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M6 6L18 18" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const InfoIcon = {
  name: 'InfoIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
      <path d="M12 16V12" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 8H12.01" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const UploadIcon = {
  name: 'UploadIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M17 8L12 3L7 8" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 3V15" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const CircleIcon = {
  name: 'CircleIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
    </svg>
  `,
}

export const ArrowLeftIcon = {
  name: 'ArrowLeftIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 12H5" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 19L5 12L12 5" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const SearchIcon = {
  name: 'SearchIcon',
  props: {
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="11" cy="11" r="8" :stroke="color" stroke-width="2"/>
      <path d="M21 21L16.65 16.65" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const HelpIcon = {
  name: 'HelpIcon',
  props: {
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" :stroke="color" stroke-width="2"/>
      <path d="M9.09 9C9.32537 8.33144 9.78916 7.76813 10.4 7.4092C11.0108 7.05026 11.7332 6.91803 12.44 7.03666C13.1469 7.1553 13.7929 7.51712 14.27 8.06227C14.7471 8.60742 15.0265 9.30126 15.06 10.03C15.06 11.8 12.9 12.7 12.9 12.7V14" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="12" cy="17" r="1" :fill="color"/>
    </svg>
  `,
}

export const ImageIcon = {
  name: 'ImageIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" :stroke="color" stroke-width="2"/>
      <circle cx="8.5" cy="8.5" r="1.5" :fill="color"/>
      <path d="M21 15L16 10L5 21" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

export const DocumentIcon = {
  name: 'DocumentIcon',
  props: {
    size: {
      type: [String, Number],
      default: 16,
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  template: `
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 18.9609 21.7893 19.3359 21.4142C19.7109 21.0391 19.9219 20.5304 19.9219 20V8L14 2Z" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M14 2V8H20" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M16 13H8" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M16 17H8" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M10 9H9H8" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
}

// 测试函数：验证所有图标组件是否正常工作
export const testIcons = () => {
  const icons = [
    EditIcon,
    DeleteIcon,
    ImportIcon,
    UpdateVectorsIcon,
    ArchiveIcon,
    EnterMatchingIcon,
    StopIcon,
    PlusIcon,
    ExportIcon,
    DisabledIcon,
    ExclamationTriangleIcon,
    ExclamationCircleIcon,
    BanIcon,
    CheckIcon,
    XIcon,
    UploadIcon,
    CircleIcon,
    ArrowLeftIcon,
    SearchIcon,
    HelpIcon,
    ImageIcon,
    DocumentIcon,
  ]
  const results = icons.map(icon => ({
    name: icon.name,
    hasTemplate: !!icon.template,
    hasProps: !!icon.props,
    isValid: !!icon.template && !!icon.props,
  }))

  console.log('SVG图标组件测试结果:', results)
  return results.every(result => result.isValid)
}
